<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleMenuSelect"
    >
    <el-menu-item index="2">已提交文章</el-menu-item>
    <el-menu-item index="1" v-if="this.$store.state.user.type == 2">草稿文章</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == '1'" class="list">
      <h1>草稿文章列表</h1>
      <el-table :data="activeArticles" max-height="800">
        <el-table-column
          prop="title"
          label="标题"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          align="center"
        ></el-table-column>
        <!-- 添加其他需要显示的列 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="viewArticle(scope.row)"
              >查看</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteArticle(scope.row)"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="small"
              @click="editArticle(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="submitAudit(scope.row)"
              >提交审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-else class="list">
      <h1>已提交文章列表</h1>
      <el-table :data="archivedArticles" max-height="800">
        <el-table-column
          prop="title"
          label="标题"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          align="center"
        ></el-table-column>
        <!-- 添加其他需要显示的列 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="viewArticle(scope.row)"
              >查看</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="withdrawAudit(scope.row)"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 确保已经导入axios
import NProgress from 'nprogress';

export default {
  data() {
    return {
      activeArticles: [], // 状态为“活跃”的文章
      archivedArticles: [], // 状态为“归档”的文章
      articles: [], // 文章列表数据
      activeIndex: '2',
    };
  },

  created() {
    this.fetchArticles(); // 组件创建时获取文章列表
  },
  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index;
    },
    fetchArticles() {
      axios
        .get('api/article/list') // 替换为你的后端API
        .then((response) => {
          NProgress.done();
          this.articles = response.data.data; // 假设后端返回的数据是直接的文章列表
          this.activeArticles = this.articles.filter(
            (article) => article.status === -2
          );
          this.archivedArticles = this.articles.filter(
            (article) => article.status != -2
          );
        })
        .catch((error) => {
          console.error('获取文章列表失败', error);
        });
    },
    viewArticle(article) {
      this.$router.push({ name: 'ArticleDetails', params: { id: article.id } });
    },
    editArticle(article) {
      this.$router.push({ name: 'editArticle', params: { id: article.id } });
    },
    deleteArticle(article) {
      axios.delete('api/article/' + article.id).then((response) => {
        this.fetchArticles(); // 删除成功后重新获取文章列表
      });
    },
    submitAudit(article) {
      axios.put('api/article/audit/' + article.id).then((response) => {
        this.fetchArticles(); // 提交审核成功后重新获取文章列表
      });
    },
    // 撤回审核
    withdrawAudit(article) {
      axios.put('api/article/withdraw/' + article.id).then((response) => {
        this.fetchArticles(); // 撤回审核成功后重新获取文章列表
      });
    },
  },
};
</script>

<style scoped>
.list {
  padding: 30px;
  border: 3px #ccc solid;
  border-radius: 15px;
  background-color: white;
  width: 90%;
  margin: 30px auto;
}

h1 {
  text-align: center;
}

.el-table {
  width: 100%;
  /* margin: 0 auto; */
}
</style>
